<template>
  <div class="box">
    <!-- 标题 -->
    <h1>博客评论</h1>
    <hr />
    <!-- 评论内容 -->
    <div class="content">
      <el-tabs v-model="activeName" @tab-click="handleClick()">
        <el-tab-pane label="我的文章评论" name="first" class="first">
          <ul>
            <li v-for="(item, index) in listContent" :key="index">
              <!-- 头像 -->
              <a href="javascript:;">
                <!-- 判断该用户是否有头像，没有则显示默认图片 -->
                <img
                  v-if="item.picture"
                  :src="`http://` + item.picture"
                  alt=""
                />
                <img v-else src="../../assets/头像.jpg" alt="" />
              </a>
              <div>
                <!-- 谁评论你的文章 -->
                <p class="comments-title">
                  <span>{{ item.username }} </span>
                  <span class="gray"> {{ item.date }} </span>
                  <span class="gray"> 回复了你的文章 </span>
                  <span class="article" @click="toarticle(item.article_id)">{{
                    item.article_title
                  }}</span>
                </p>
                <!-- 评论内容 -->
                <p class="detailed-content first-content">
                  <span>详细评论：</span>
                  <span>{{ item.content }} </span>
                </p>
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="我发表的评论" name="second" class="second">
          <ul>
            <li v-for="(item, index) in listContent" :key="index">
              <!-- 你评论了谁的文章 -->
              <p>
                <span>我 </span>
                <span class="gray"> {{ item.date }} </span>
                <span class="gray"> 评论了 </span>
                <span> {{ item.username }} </span>
                <span class="gray"> 的文章 </span>
                <span class="article" @click="toarticle(item.article_id)">{{
                  item.article_title
                }}</span>
              </p>
              <!-- 评论内容 -->
              <p class="detailed-content">
                <span>详细评论：</span>
                <span>{{ item.content }}</span>
              </p>
            </li>
          </ul>
        </el-tab-pane>
        <!-- 空状态 -->
        <el-empty description="还没有评论哦~" v-if="show"></el-empty>
        <!-- 页码 -->
        <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="totalNumber * 10"
            @current-change="currentPage"
            :current-page="page"
            v-if="display"
          >
          </el-pagination>
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommentsManagement",
  data() {
    return {
      activeName: "first", //标签默认显示first
      page: 1, //页码,默认为第一页
      totalNumber: 10, //总页数，默认1页
      display: false, //页码显示与隐藏
      show: true, //空状态显示与隐藏
      listContent: [], //评论列表
    };
  },
  methods: {
    // 用户管理-切换后页码
    currentPage(val) {
      // 判断当前在什么标签下
      if (this.activeName === "first") {
        this.page = val; //改变后的页码
        this.receive(); // 收到的评论
      } else {
        this.page = val; //改变后的页码
        this.publish(); // 我发表的评论
      }
    },
    // 用户收到的评论
    receive() {
      this.$http({
        method: "post",
        url: "comments/userReceivedAllComments",
        params: {
          pageNum: this.page, //当前页码
          pageSize: 10, //每页条数
        },
      }).then(({ data }) => {
        this.listContent = []; //评论列表清空
        if (data.flag) {
          this.listContent = data.data.list; //评论列表
          this.totalNumber = data.data.pages; //总页数
          // 判断当前是否有评论，有则显示页码隐藏空状态，无则显示空状态隐藏页码
          if (this.listContent.length) {
            this.display = true;
            this.show = false;
          } else {
            this.display = false;
            this.show = true;
          }
        }
      });
    },
    // 用户发表的评论
    publish() {
      this.$http({
        method: "post",
        url: "comments/userMadeAllComments",
        params: {
          pageNum: this.page, //当前页码
          pageSize: 10, //每页条数
        },
      }).then(({ data }) => {
        this.listContent = []; //评论列表清空
        if (data.flag) {
          this.listContent = data.data.list; //评论列表
          this.totalNumber = data.data.pages; //总页数
          // 判断当前是否有评论，有则显示页码隐藏空状态，无则显示空状态隐藏页码
          if (this.listContent.length) {
            this.display = true;
            this.show = false;
          } else {
            this.display = false;
            this.show = true;
          }
        }
      });
    },
    // 切换标签头（导航栏）
    handleClick() {
      if (this.activeName === "first") {
        this.receive(); // 收到的评论
        this.page = 1; //页码恢复默认值为1
        this.display = false; //页码显示与隐藏恢复默认状态
        this.show = true; //空状态显示与隐藏恢复默认状态
      } else {
        this.publish(); // 我发表的评论
        this.page = 1; //页码恢复默认值为1
        this.display = false; //页码显示与隐藏恢复默认状态
        this.show = true; //空状态显示与隐藏恢复默认状态
      }
    },
    // 跳转到该条评论的文章详情页
    toarticle(id) {
      this.$router.push({
        name: "BlogDetails",
        // 文章id
        query: {
          itemid: id,
        },
      });
    },
  },
  mounted() {
    this.receive(); //页面加载时默认显示收到的评论
  },
};
</script>

<style scoped>
.box {
  padding: 20px;
  box-shadow: 0 0 20px 0 rgb(237, 237, 237);
}
hr {
  margin-top: 10px;
  width: 40px;
  height: 3px;
  background-color: black;
  margin-left: 45px;
}
/* 下面内容 */
.content {
  margin: 20px 0;
}
/* 标签页样式 */
.content /deep/ .el-tabs__item {
  font-size: 18px;
}
.content /deep/ .el-tabs__nav-wrap::after {
  width: 0;
}
/* 我文章的评论 */
.first {
  margin-top: 10px;
}
ul {
  margin-top: 10px;
}
.first img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.first li {
  display: flex;
}
.first a {
  flex: 1;
  text-align: center;
}
.first li > div {
  flex: 9;
}
.comments-title {
  line-height: 50px;
}
/* 我发表的评论 */
.second li > div span {
  margin: 5px;
}
.second li {
  padding: 0 20px;
}
/* 文章名颜色 */
.article {
  color: rgb(100, 121, 240);
  cursor: pointer;
}
/* 非用户昵称，文章名的文字颜色 */
.gray {
  color: rgb(129, 128, 128);
}
/* 评论内容 */
.detailed-content {
  padding: 15px 20px;
}
.first-content {
  padding: 0 20px 15px;
}
li {
  margin-top: 15px;
  border-bottom: 1px dashed rgb(179, 177, 177);
}
.page {
  text-align: center;
  margin-top: 30px;
}
</style>